<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="https://cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.css" rel="stylesheet">
	<style>
		#dplayer{
			width: 600px;
			height: 400px;
		}
	</style>
</head>
<body>
	<div id="dplayer"></div>
</body>
<script src="https://cdn.bootcss.com/hls.js/0.8.9/hls.min.js"></script>
<script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.min.js"></script>
<script src="https://cdn.bootcss.com/dashjs/2.6.6/dash.all.min.js"></script>
<script src="https://cdn.bootcss.com/dplayer/1.22.2/DPlayer.min.js"></script>
<script>
	const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    autoplay: true,
    danmaku: true,
    apiBackend: {
        read: function (endpoint, callback) {
            console.log('Pretend to connect WebSocket');
            callback();
        },
        send: function (endpoint, danmakuData, callback) {
            console.log('Pretend to send danamku via WebSocket', danmakuData);
            callback();
        }
    },
    video: {
        url: 'http://live.xuejiangjun.xyz/12/12.m3u8',
        type: 'hls'
    }
});
</script>
</html>